<template>
<div class="container">
	<swiper class="swiper-wrap" :options="swiperOption">
		<swiper-slide v-for="item in service.detail.img" :key="item" class="swiper-item"><img v-bind:src="item" alt="item" /></swiper-slide>
	</swiper>
	<div class="service-info">
		<div class='servive-head'>
			<div class="title">{{service.detail.title}}</div>
			<div class="star-wrap">
				<img src='../assets/img/rank-star.png' />
				<span class='rank-score'>{{service.average || 5}}</span>
			</div>
		</div>
		<div class="price-wrap">
			<div class="range-price">
				<span class='price'>¥ {{service.detail.range_price}}</span>
			</div>
			<div class="hotter">
				<img class='hotimg' src='../assets/img/hoter.png'>
				<span class="hotspan">{{service.detail.browse_num > 1000? '999+' : service.detail.browse_num}}</span>
			</div>
		</div>
	</div>
	<div class='label-wrap'>
		<div class='label'><img src='../assets/img/label-icon.png' />服务保证</div>
		<div class='label'><img src='../assets/img/label-icon.png' />效率高</div>
		<div class='label'><img src='../assets/img/label-icon.png' />服务态度好</div>
	</div>
	<div class='hr-line'></div>
	<div class='cards-wrap'>
		<div class='cards-title item-head'>优惠活动</div>
		<div class='cards-info' v-if="service.preferential">
			<span class='clabel'>限时优惠</span>
			<span class='cif'>{{service.preferential}}</span>
		</div>
		<div class='cards-grap'>
			<div class="card-wrap">
				<div v-for="item in service.card" :key="item.card_price" class='card-item'>
					<div style='display:flex'>
						<div class="card-price">￥<span style='font-size:28px;'>{{item.card_price}}</span></div>
						<div class='card-sale-info'>优惠券满{{item.is_price}}立减</div>
					</div>
					<div class="wx-card-wrap">
						<img v-if="item.using == 0" src='../assets/img/receive.png' />
						<img v-if="item.using == 1" src='../assets/img/received.png' />
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hr-line"></div>
	<div class="comments-wrap">
		<div class="comment-title">
			<span class="item-head">服务商</span>
			<img class="ar" src='../assets/img/order-more.png'>
			<span class="serv-txt">全部 {{service.service_user_info.service_count}} 个服务</span>
		</div>
		<div class="serv-info">
			<img class='serv-avatar' :src='service.service_user_info.logo'>
			<span class="serv-name">{{service.service_user_info.company_name}}</span>
		</div>
	</div>
	<div class="hr-line"></div>
	<div class="comments-wrap" v-if="service.deploy_info">
		<div class="comment-title">
			<div class="item-head">服务与设施</div>
			<div class='cards-grap'>
				<div class="card-wrap">
					<div class="deploy-item" v-for="item in service.deploy_info" :key="item.img">
						<img :src="item.img">
						<p>{{item.name}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hr-line"></div>
	<div class="comments-wrap">
		<div class="comment-title item-head">
			全部评论 {{service.comment_num}} | 服务次数 {{service.service_num}}
			<img class="ar" src='../assets/img/order-more.png'>
		</div>
		<div class="comment-labels" v-if="service.sign">
			<span v-for="item in service.sign" :key="item.name">{{item.name}} {{item.num}}</span>
		</div>
		<div class="comment-info" v-if="service.comment[0]">
			<img class='coment-avatar' :src="avatarComputed" />
			<div class='comment-detail-wrap'>
				<div class="wx-name">{{service.comment[0].wx_name}}</div>
				<div class="wx-comment">
					{{service.comment[0].comment}}
				</div>
				<div class="wx-time">{{service.comment[0].date_time}}</div>
			</div>
		</div>
	</div>
	<div class='service-hr'>
		<span class='service-line'></span>服务详情<span class='service-line'></span>
	</div>
	<div class='sevice-detail' v-html='service.detail.service_introduce'></div>
	<button class="bottom-btn" @click="downloadApp">
    点击下载创享App
  </button>
</div>
</template>

<script>
import axios from 'axios'
const API_PROXY = 'https://bird.ioliu.cn/v1/?url='

export default {
	name: 'HelloWorld',
	data() {
		return {
			service: {
				card: [],
				detail: {
					img: []
				},
				comment: [],
				service_user_info: {}
			},
			swiperOption: {
				autoplay: true,
				loop: true,
				effect: 'slide'
			}
		}
	},

	computed: {
		avatarComputed: function () {
			if ( this.service.comment[ 0 ] ) {
				if ( this.service.comment[ 0 ].app_avatar ) {
					return this.service.comment[ 0 ].app_avatar
				} else if ( this.service.comment[ 0 ].business_card ) {
					return this.service.comment[ 0 ].business_card
				} else {
					return null
				}
			} else {
				return null
			}
		}
	},

	mounted: function () {
		this.service_id = this.getUrlParam( 'service_id' )
		this.user_id = this.getUrlParam( 'user_id' )
		this.wuser_id = this.getUrlParam( 'wuser_id' )
		this.code_type = this.getUrlParam( 'code_type' )
		this.getDetail( this.service_id, this.user_id, this.wuser_id, this.code_type )
	},

	methods: {
		// get url参数方法
		getUrlParam: function ( name ) {
			var reg = new RegExp( '(^|&)' + name + '=([^&]*)(&|$)' )
			var r = window.location.search.substr( 1 ).match( reg )
			if ( r != null ) {
				return decodeURI( r[ 2 ] )
			}
			return null
		},

		downloadApp: function () {
			window.location.href = 'https://v2.crejoy.cn/live-web-lastest/loc.php?action=activity'
		},

		getDetail: function ( a, c, d, e ) {
			let self = this
			axios.post('https://mini.crejoy.cn/api/Service_info/detail', {
				service_id: a,
				user_id: c,
				wuser_id: d,
        code_type: e
			} ).then( ( value ) => {
				self.service = value.data.data
				console.log( self.service )
			} )
		}
	}
}
</script>

<style scoped>
@import '../assets/css/hello.css'
</style>
